<template>
	<view>
		<view class="status_bar">
			<!-- 这里是状态栏 -->
		</view>
		<view style="padding:10rpx 20rpx 0rpx;">
			<u-icon name="arrow-left" size="50" color="#7a7e83" style="margin-right: 600rpx;" @click="Back"></u-icon>
			<u-icon name="more-dot-fill" size="50" color="#7a7e83"></u-icon>
		</view>
		<view style="font-size: 36rpx;font-weight:700;margin: 30rpx;color: #7a7e83;">修改头像:</view>
		<view class="my">
			<view class="my-view">
				<u-upload ref="uUpload" :auto-upload="false" :custom-btn="true" max-count="1" width="110" height="110"
					:deletable="false" :action="action" :header="header" @on-success="upIconData" size-type="compressed">
					<view slot="addBtn" class="slot-btn" hover-class="slot-btn__hover" hover-stay-time="150">
						<u-icon name="photo" size="50" :color="$u.color['lightColor']" label="上传图片" label-pos="bottom" label-size="24"></u-icon>
					</view>
				</u-upload>
				<view class="text-wrap">
					<view style="display: flex;flex-direction: row;">
						<view class="name_v">{{user.nickname}}</view>
					</view>
					<text>ID号:{{user.uuId}}</text>
				</view>
			</view>
			<text class="my-text">个签:人类早已可以乘太空船登上月球，却仍无法窥探他人内心的宇宙</text>
			<view style="display: flex;flex-direction: row;">
				<view style="color: #4b5ad9;">头像修改预览卡片</view>
				<view class="demo-bt" @click="remove">换另一张?</view>
			</view>
		</view>
		<u-button class="custom-style" shape="square" @click="upIcon">满意提交修改</u-button>
		<view style="font-size: 36rpx;font-weight:700;margin: 40rpx 30rpx;color: #7a7e83;">修改帐号:</view>
		<view class="my">
			<u-form :model="formName" ref="uForm">
				<u-form-item label="请输入密码" prop="name" label-position="top" :label-style="labelStyle" :border-bottom="false">
					<u-input v-model="formName.password" :border-bottom="false"/>
				</u-form-item>
				<u-form-item label="请输入新帐号" prop="intro" label-position="top" :label-style="labelStyle" :border-bottom="false">
					<u-input v-model="formName.userName" :border-bottom="false"/>
				</u-form-item>
			</u-form>
		</view>
		<u-button class="custom-style" shape="square">确认无误提交</u-button>
		<view style="font-size: 36rpx;font-weight:700;margin: 40rpx 30rpx;color: #7a7e83;">修改密码:</view>
		<view class="my">
			<u-form :model="formMm" ref="uForm">
				<u-form-item label="请输入旧密码" prop="name" label-position="top" :label-style="labelStyle" :border-bottom="false">
					<u-input v-model="formMm.userName" :border-bottom="false"/>
				</u-form-item>
				<u-form-item label="请输入新密码" prop="intro" label-position="top" :label-style="labelStyle" :border-bottom="false">
					<u-input :border-bottom="false"/>
				</u-form-item>
				<u-form-item label="请再次确认新密码" prop="intro" label-position="top" :label-style="labelStyle" :border-bottom="false">
					<u-input v-model="formMm.password" :border-bottom="false"/> 
				</u-form-item>
			</u-form>
		</view>
		<u-button class="custom-style" shape="square" @click="upPassword">确认无误提交</u-button>
		<view style="font-size: 36rpx;font-weight:700;margin: 30rpx;color: #7a7e83;">修改用户信息:</view>
		<view class="my">
			<u-form :model="formMm" ref="uForm">
				<u-form-item label="用户昵称" prop="name" label-position="top" :label-style="labelStyle" :border-bottom="false">
					<u-input v-model="formMm.name" :border-bottom="false"/>
				</u-form-item>
				<u-form-item label="年龄" prop="intro" label-position="top" :label-style="labelStyle" :border-bottom="false">
					<u-input v-model="formMm.intro" :border-bottom="false"/>
				</u-form-item>
				<u-form-item label="邮箱" prop="intro" label-position="top" :label-style="labelStyle" :border-bottom="false">
					<u-input v-model="formMm.intro" :border-bottom="false"/>
				</u-form-item>
				<u-form-item label="电话号码" prop="intro" label-position="top" :label-style="labelStyle" :border-bottom="false">
					<u-input v-model="formMm.new" :border-bottom="false"/>
				</u-form-item>
			</u-form>
		</view>
		<u-button class="custom-style" shape="square">满意提交修改</u-button>
		<view style="height:80rpx;"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				user: {
					uuId: uni.getStorageSync('uuId'),
					nickname: uni.getStorageSync('nickname'),
				},
				labelStyle:{
					lineHeight: '20rpx',
				},
				action: this.$url + '/users/upIcon',
				header: {'token':uni.getStorageSync('token')},
				formName: {
					password: '',
					userName: '',
				},
				formMm: {
					password: '',
					userName: '',
				},
				rules: {
					
				}
			};
		},
		methods: {
			remove() {
				this.$refs.uUpload.remove(0);
			},
			upIcon(){
				this.$refs.uUpload.upload();
			},
			upIconData(data,a,b,c){
				console.log(JSON.stringify(data)+'------------------------------'); 
				uni.setStorageSync('icon',data.data)
			},
			Back() {
				uni.navigateBack({
					delta: 1, //返回层数，2则上上页
				})
			},
			upPassword(){
				this.$sendRequest({
					url: "/users/upPassword",
					method: 'POST',
					data: this.formMm,
					success: (res) => {
						if (res.data.code == 200) {
							console.log(res);
						}
					}
				})
			}
		},
		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		onShow() {
			/* 隐藏凸起图标 */
			var icon = plus.nativeObj.View.getViewById("icon");
			if (icon != null) {
				setTimeout(function() {
					icon.hide();
				}, 100);
			}
		}
	}
</script>

<style>
	.my {
		
		padding: 30rpx;
		margin: 25rpx 25rpx 0 25rpx;
		background-color: #ffffff;
		border-radius: 20rpx 20rpx 0 0;
		display: flex;
		flex-direction: column;
		box-shadow: 2px 3px 5px 5px rgba(230, 234, 246, 0.5);
	}

	.my-view {
		display: flex;
		flex-direction: row;
		margin-bottom: 10rpx;
	}

	.text-wrap {
		margin-left: 20rpx;
		display: flex;
		flex-direction: column;
		font-size: 32rpx;
	}

	.name_v {
		margin-top: 23rpx;
		width: 500rpx;
		display: -webkit-box;
		/*弹性伸缩盒子模型显示*/
		-webkit-box-orient: vertical;
		/*排列方式*/
		-webkit-line-clamp: 1;
		/*显示文本行数(这里控制多少行隐藏)*/
		overflow: hidden;
	}

	.text-wrap text:nth-child(2) {
		margin-top: 15rpx;
		font-size: 28rpx;
		color: #9A9A9A;
	}

	.my-text {
		color: #9A9A9A;
		margin-bottom: 10rpx;
	}

	.demo-bt {
		margin-left: 290rpx;
		padding-top: 8rpx;
		color: #ffffff;
		width: 135rpx;
		height: 50rpx;
		text-align: center;
		font-size: 24rpx;
		border-radius: 8px;
		background-color: #4b5ad9;
	}

	.slot-btn {
		width: 120rpx;
		height: 120rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background: rgb(244, 245, 246);
		border-radius: 10rpx;
	}

	.slot-btn__hover {
		background-color: rgb(235, 236, 238);
	}
</style>

<style scoped>
	.u-form-item{
		margin-bottom: -20rpx;
	}
	.custom-style {
		margin: 0 25rpx;
		background-color: #4b5ad9;
		color: white;
	}
</style>
